<template>
	<div class="zp" style="background-color: #fcfdfe;">
	<div style="background-color: #ffffff;border: 1px solid #f3f3f3;padding: 20px 10px 0 10px;margin-top: 20px;box-shadow: azure;">
		<div class="cont">
			<div class="phone">费用类型</div>
			<div class="phonename">西药费</div>
		</div>
		<div class="cont">
			<div class="phone">就诊科室</div>
			<div class="phonename">消化内科</div>
		</div>
		<div class="cont">
			<div class="phone">医生姓名</div>
			<div class="phonename">李梅</div>
		</div>
		<div class="cont">
			<div class="phone">就诊人</div>
			<div class="phonename">刘伟</div>
		</div>
		<div class="cont" style="border: 0;">
			<div class="phone">就诊号码</div>
			<div class="phonename">610*********0989</div>
		</div>
	</div>
	<div style="background-color: #ffffff;border: 1px solid #f3f3f3;padding: 20px 10px 0 10px;margin-top: 20px;box-shadow: azure;">
		<div class="title">
			费用明细
		</div>
		<div class="cont" style="display: flex; justify-content: space-between;align-items: center;padding: 5px 0;">
			<div class="phone"><div class="navsd">费用类型</div><div class="zpw"><span>单价：¥50.00</span><span style="margin-left: 10px;">数量：3</span></div></div>
			<div class="phonename" style="color: #333333;font-weight: 500;">¥150.00</div>
		</div>
		<div class="cont" style="display: flex; justify-content: space-between;align-items: center;padding: 5px 0; border: 0;">
			<div class="phone"><div class="navsd">费用类型</div><div class="zpw"><span>单价：¥50.00</span><span style="margin-left: 10px;">数量：3</span></div></div>
			<div class="phonename" style="color: #333333;font-weight: 500;">¥150.00</div>
		</div>
	</div>
	<div>
	</div>
<div style="background-color: #ffffff;border: 1px solid #f3f3f3;padding: 20px 10px 0 10px;margin-top: 20px;box-shadow: azure;">
		<div class="cont">
			<div class="phone">支付方式</div>
			<div class="phonename">余额</div>
		</div>
		<div class="cont" style="justify-content: space-between; border: 0;">
		<div style="display: flex;">
			<div class="phone">卡内余额</div>
			<div class="phonename">2000.00元</div>
		</div>
		<div @click='topup'><span style="margin-right: 5px;color: #006eff;">去充值</span><img src="@/static/addmore.png" alt="" style="width: 10px;height: 10px;"></div>
		</div>
	</div>
	<div style="height: 100px;"></div>
	<div style="position: fixed;bottom: 0;width: 100%;height: 50px;display: flex;align-items: center;background-color: #ffffff;">
		<div style="flex: 1;"><span style="font-size: 12px;">合计：</span><span style="font-size: 16px;color: #F46363;">600.00</span></div>
		<div @click='gopayover' style="flex: 1;text-align: center;background-color: #006eff;line-height: 50px;color: #ffffff;font-size: 14px;font-weight: 500;">扣款缴费</div>
	</div>
	</div>

</template>

<script>
	export default {
		data(){
			return{
				
			}
		},methods:{
			topup(){
				console.log(1)
				uni.navigateTo({
					url:'../../../outpatientservice/pages/topup/topup'
				})
			},
			gopayover(){
				uni.navigateTo({
					url:'./gopayover'
				})
			}
		}
	}
</script>

<style>
	.zpw {
		color: #AAAAAA;
		font-size: 12px;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    text-align: left;
		    line-height: 28px;
	}
	.navsd{
		font-size: 14px;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    text-align: left;
		    line-height: 28px;
			    color: #333333;
	}
	.title{
		    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    color: #AAAAAA;
			border-bottom: 1px solid #f3f3f3;
			padding: 5px 0 10px 0;
	}
	.phonename{
		margin-left: 15px;
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 14px;
	}
	.phone{
		    color: #AAAAAA;
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
				
	}
	.cont{
		display: flex;
		align-items: center;
		height: 50px;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
	.address{
		    font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-size: 12px;
		    color: #7F7F7F;
	}
	.namehosp{
		font-size: 15px;font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
    font-style: normal;
	}
	.img{
		width: 40px;
		margin-right: 10px;
		height: 40px;
		
	}
	.context{
		flex: 70%;
	}
	.right{
		flex: 10%;
	}
	.zp{
		padding: 0 10px;
	}
	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72px;
		padding: 5px;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
</style>